<template>
	<!-- 检查点列表项 -->
	<view>
		<view class="check-item" @click="goCheckDetail(item.id, item.所属网格id)" v-for="item in infoList" :key="item.id">
			<view class="top">
				<text style="max-width: 530rpx;">{{item['检查点名称']}}</text>
				<view class="priority">{{checkPointType[item['检查点类型']]}}</view>
			</view>
			<view class="center">
				<text>检查点编号：</text>
				<text style="color: #888">{{item['检查点编号']}}</text>
			</view>
			<view class="bottom">
				<text>检查点地址：</text>
				<text style="color: #888;">{{item['地址']}}</text>
			</view>
			<view class="arrow"></view>
			<view @click.stop="goRoomList(item)" v-if="item['检查点类型'] === 'residential'" class="room">房屋列表</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			infoList: {
				type: Array,
				default: () => []
			},
			isMyCheckPoint: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				checkPointType: this.$type.checkPointType,
				typeList: ['company','restaurant','clinic','shop','publicarea', 'watercourse']
			}
		},
		methods: {
			goCheckDetail(id, gridId) {
				if(this.isMyCheckPoint) {
					uni.navigateTo({
						url: '/fireGridCheck/myCheckPointDetail/myCheckPointDetail?id=' + id
					})
					return
				}
				uni.navigateTo({
					url: "/fireGridCheck/checkPoint/checkPoint?id=" + id + "&gridId=" + gridId
				})
				// if(this.typeList.includes(type)) {
				// 	uni.navigateTo({
				// 		url: `/fireGridCheck/${type}Detail/${type}Detail?id=${id}`
				// 	})
				// }else if(type == 'room') {
				// 	this.$http.post('gridSystem/checkPoint/info', {id}).then(res => {
				// 		if(res.code === 10000) {
				// 			uni.navigateTo({
				// 				url: `/fireGridCheck/${type}Detail/${type}Detail?id=${res.data.房屋.房屋id}&checkId=${id}`
				// 			})
				// 		}
				// 	})
				// }else {
				// 	uni.navigateTo({
				// 		url: '/fireGridCheck/villageDetail/villageDetail?id=' + id
				// 	})
				// }
			},
			goRoomList(item) {
				uni.navigateTo({
					url: '/fireGridCheck/roomList/roomList?id=' + item.id + '&checkName=' + item['检查点名称']
				})
			}
		}
	}
</script>

<style lang="scss">
	.check-item {
		// background-color: pink;
		position: relative;
		padding: 20rpx 35rpx 22rpx 35rpx;
		font-size: 28rpx;
		line-height: 48rpx;
		margin-bottom: 10rpx;
		background-color: #fff;
		border-bottom: 10rpx solid #F5F5F5;
		.room {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			color: #fff;
			background-color: #3080FB;
			// border: 2rpx solid #3080FB;
			font-size: 26rpx;
			text-align: center;
			height: 40rpx;
			padding: 0 14rpx;
			line-height: 40rpx;
			// margin-left: 18rpx;
		}
		.top {
			display: flex;
			font-size: 32rpx;
			align-items: center;
	
			&:before {
				display: inline-block;
				content: "";
				width: 6rpx;
				height: 32rpx;
				background-color: #3080FB;
				transform: translateX(-10rpx);
			}
	
			.priority {
				// min-width: 84rpx;
				color: #3080FB;
				border: 2rpx solid #3080FB;
				font-size: 20rpx;
				text-align: center;
				height: 28rpx;
				padding: 0 14rpx;
				line-height: 24rpx;
				margin-left: 18rpx;
			}
			.priority.low{
				color: #E57544;
				border: 2rpx solid #F29B76;
			}
			.priority.midium{
				color: #E57544;
				border: 2rpx solid #F29B76;
			}
			.priority.high{
				color: #E57544;
				border: 2rpx solid #F29B76;
			}
		}
		.bottom {
			overflow:hidden;//超出的隐藏
			text-overflow:ellipsis;//省略号
			white-space:nowrap;//强制一行显示
		}
		.arrow {
			width: 16rpx;
			height: 16rpx;
			border-top: 2rpx solid #999;
			border-right: 2rpx solid #999;
			transform: rotate(45deg);
			position: absolute;
			top: 87rpx;
			right: 20rpx;
		}
	}
</style>